{namespace layout autoescape="false"}

/**
 * Layout
 * @param header Content of the layout header.
 * @param nav Content of the layout nav.
 * @param body Content of the layout body.
 * @param title The title of the document.
 */
{template .page}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{$title}</title>
        <link rel="stylesheet" href="../../build/aui-css/css/bootstrap.css">
        <link rel="stylesheet" href="assets/main.css">
        <script src="../../build/aui/aui.js"></script>
    </head>
    <body>
    <div class="container-fluid">
        <header class="row-fluid" id="header">
            <div id="header-default">{$header}</div>
        </header>
        <div class="row-fluid" id="nav">
            <div id="nav-default">{$nav}</div>
        </div>
        <div class="row-fluid">
            {$body}
        </div>
    </div>
        <div class="container-fluid" id="info">
            <div id="info-default">I am a default content <a href="dummy">Dummy link</a>.</div>
        </div>
        <script src="main.js"></script>
    </body>
    </html>
{/template}

/**
  * Nav
  * @param navs Nav items.
  */
{template .nav}
    <nav>
        <ul>
        {foreach $nav in $navs}
            <li><a href="{$nav}">{$nav}</a></li>
        {/foreach}
        </ul>
    </nav>
{/template}

/**
  * Surface
  * @param sid Surface id.
  * @param basePath Base path for the urls.
  * @param? info Surface info.
  */
{template .surface}
    <section id="surface{$sid}">
        <div id="surface{$sid}-default">
            <a href="{$basePath}?sid={$sid}&foo=complex string foo">Surface {$sid} </a>
            - <small>{if $info}{$info}{/if}</small>
            <br/>
            <a href="http://google.com">External</a><br/>
            <a href="/outside">Outside base path</a><br/>
            <a href="{$basePath}/unrouted">Unrouted link</a><br/>
            <a href="#hash">Hash link</a><br/>
            <a href="/demos/surface/about#hash">Vaid link with hash</a><br/>
        </div>
    </section>
{/template}

/**
 * /home
 */
{template .home}
    {call layout.page data="all"}
        {param header}
            <h1 class="span12">AlloyUI - /home</h1>
        {/param}
        {param nav}
            {call layout.nav}
                {param navs: ['home', 'about'] /}
            {/call}
        {/param}
        {param body}
            <div class="span12">
                {call layout.surface data="all"}
                    {param sid: 1 /}
                    {param basePath}home{/param}
                {/call}
                {call layout.surface data="all"}
                    {param sid: 2 /}
                    {param basePath}home{/param}
                {/call}
            </div>
        {/param}
    {/call}
{/template}

/**
 * /about
 */
{template .about}
    {call layout.page data="all"}
        {param header}
            <h1 class="span12">AlloyUI - /about</h1>
        {/param}
        {param nav}
            {call layout.nav}
                {param navs: ['home', 'about', 'contact'] /}
            {/call}
        {/param}
        {param body}
            <div class="span12">
                {call layout.surface data="all"}
                    {param sid: 1 /}
                    {param basePath}about{/param}
                {/call}
                {call layout.surface data="all"}
                    {param sid: 2 /}
                    {param basePath}about{/param}
                {/call}
            </div>
        {/param}
    {/call}
{/template}
